<template>
  <div class="areaInput">
    <!-- 省市 城市  -->
    <el-row :gutter="10" v-if="isShowMore === false">
      <el-col :span="11">
        <el-select v-model="provinceId" placeholder="省" filterable @change="getCityList($event)" :disabled="isDisable">
          <!-- <el-option v-for="item in provinceList" :key="item.provinceId" :label="item.provinceName" :value="item.provinceId">
          </el-option> -->
          <el-option
          v-for="item in provinceList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="11">
        <el-select v-model="cityId" placeholder="市" filterable @change="changeCity($event)" clearable :disabled="isDisable">
          <el-option
            v-for="item in cityList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <!-- 省市 城市区  -->
    <el-row :gutter="10" v-if="isShowMore === true">
      <el-col :span="7">
        <el-select v-model="provinceId" placeholder="省" filterable @change="getCityList($event)" :disabled="isDisable">
          <el-option
            v-for="item in provinceList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="7">
        <el-select v-model="cityId" placeholder="市" filterable @change="getAreaList($event)" :disabled="isDisable">
          <el-option
            v-for="item in cityList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="7">
        <el-select v-model="areaId" placeholder="区" filterable @change="changeArea($event)" :disabled="isDisable">
          <el-option
            v-for="item in areaList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 等接口下来在写
export default {
  name: "AreaInput",
  props: {
    searchInfo: {
      type: Object,
      default: () => {}
    },
    isShowMore: {
      type: Boolean,
      default: false
    },
    getProvinceId: {
      type: Function,
      default: () => {

      }
    },
    isDisable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      provinceList: [],
      cityList: [],
      areaList: [],
      provinceId: this.searchInfo && this.searchInfo.provinceId ? this.searchInfo.provinceId : "",
      cityId: this.searchInfo && this.searchInfo.cityId ? this.searchInfo.cityId : "",
      areaId: this.searchInfo && this.searchInfo.areaId ? this.searchInfo.areaId : "",
    };
  },
  methods: {
    // 获取省市的列表
    getProvinceList() {
      let data = {
        type: 1
      }
      ajax
        .post(apis.common.getCityList, data)
        .then(res => {
         if(res.code == "10000000") {
            this.provinceList = res.data;
         }
        })
        .catch(err => {});

    },
    // 当省发生改变的时候
    getCityList(val) {
      this.$emit('update:searchInfo', {
        ...this.searchInfo,
        provinceId: this.provinceId
      });
      this.cityId = ""
      this.areaId = ""
      this.cityList = [];
      this.areaList = [];
      let data = {
        type: 2,
        id: val
      }
      ajax
        .post(apis.common.getCityList, data)
        .then(res => {
          if(res.code == "10000000") {
            this.cityList = res.data;
          }
        })
        .catch(err => {});
    },
    // 当省份存在的时候
    getCityPrew() {
      let data = {
        type: 2,
        id: this.provinceId
      }
      ajax
        .post(apis.common.getCityList, data)
        .then(res => {
          if(res.code == "10000000") {
            this.cityList = res.data;
          }
        })
        .catch(err => {});
    },
    // 当市发生变化的时候
    getAreaList(val) {
      this.$emit('update:searchInfo', {
        ...this.searchInfo,
        cityId: this.cityId
      });
      this.areaId = ""
      this.areaList = [];
      let data = {
        type: 3,
        id: val
      }
      ajax
        .post(apis.common.getCityList, data)
        .then(res => {
          if(res.code == "10000000") {
            this.areaList = res.data;
          }
        })
        .catch(err => {});
    },
    changeCity(val) {
      this.$emit('update:searchInfo', {
        ...this.searchInfo,
        cityId: this.cityId
      });
    },
    // 当镇发生变化的时候
    changeArea(val) {
      this.$emit('update:searchInfo', {
        ...this.searchInfo,
        areaId: this.areaId
      });
    }
  },
  watch: {
    searchInfo: {
      handler(val, oldVal){
        if(val.provinceId != oldVal.provinceId) {
          this.provinceId = val.provinceId
          this.cityId = ""
          this.areaId = ""
        }

        if(val.cityId != oldVal.cityId) {
          this.cityId = val.cityId
          this.areaId = ""
        }

        if(val.areaId != oldVal.areaId) {
          this.areaId = val.areaId
        }
      },
      deep:true
    }
  },
  created() {
    // 初始化省
    this.getProvinceList();
    if(this.provinceId) {
      this.getCityPrew()
    }
  }
};
</script>

<style lang="scss">
  .areaInput {
    .el-col-11 {
      width: auto;
    }
  }
</style>
